@import './sass/variable';

//安全绩效
$innerColor:#009F4B;
$outerColor:#006B37;
#weekli,#yearli,#teamLi{
	display:none;
}
.S_Performance{
	.remark{
		padding:15rem / $baseFontSize $emptyWidth;
		font-size: 18rem / $baseFontSize;
		background:#fff;
		color:$priGreen;
		line-height:150%;
	}
	.remark_table{
		position: relative;
		margin:{
			top:10rem / $baseFontSize;
			bottom:10rem / $baseFontSize;
		}

		.ion-help-circled{
			position: absolute;
			right:0;
			top:-10rem / $baseFontSize;
			color:$fc_a;
			font-size: 20rem / $baseFontSize;
			width: 30rem / $baseFontSize;
			height: 30rem / $baseFontSize;
			// background:rgba(red,.2);
			text-align: center;
			line-height:30rem / $baseFontSize;
		}
		tbody td:last-child{
			color:$priGreen;
			font-weight: bold;
		}
	}
	.team_level{
		position: relative;

		.ion-help-circled{
			position: absolute;
			right:6rem / $baseFontSize;
			top:-10rem / $baseFontSize;
			color:rgba(#fff,.96);
			font-size: 20rem / $baseFontSize;
			width: 30rem / $baseFontSize;
			height: 30rem / $baseFontSize;
			// background:rgba(red,.2);
			text-align: center;
			line-height:30rem / $baseFontSize;
		}
	}
	.one_part{
		width: 100%;
		min-height: 198rem / $baseFontSize;
		background: #00733A url(../img/S_PerformanceBg.jpg) no-repeat;
   		//background: -webkit-radial-gradient(50% 55%, closest-side,$innerColor,$outerColor); /* Safari 5.1 - 6.0 */
	    //background: -o-radial-gradient(50% 55%, closest-side,$innerColor,$outerColor); /* Opera 11.6 - 12.0 */
	    //background: -moz-radial-gradient(50% 55%, closest-side,$innerColor,$outerColor); /* Firefox 3.6 - 15 */
	    //background: radial-gradient(50% 55%, closest-side,$innerColor,$outerColor);
	    background-size: 100%;
	    padding-top: 10rem / $baseFontSize;
	    padding-bottom: 20rem / $baseFontSize;

	    @include border-box;

	    .nav{
	    	border:1px solid #fff;
	    	width:296rem / 2 / $baseFontSize;
	    	margin: 0 auto;
	    	border-radius: 3rem / $baseFontSize;
	    	margin-bottom: 15rem / $baseFontSize;
	    	@include flex;
	    	visibility:hidden;
	    	height:30rem / $baseFontSize;

	    	&.select_nav{
	    		visibility:visible;
	    		width:230rem / 2 / $baseFontSize;

	    		select{
	    			width:100%;
	    			border-radius: 3rem / $baseFontSize;
	    			text-align:center;
	    		}
	    	}

	    	li{
	    		padding: 6rem / $baseFontSize 0;
	    		@include border-box;
	    		@include flex1;
	    		text-align: center;
	    		color:#fff;

	    		&.cur{
	    			background: #fff;
	    			color: $priGreen
	    		}

	    		&+li{
	    			border-left:1px solid #fff
	    		}

	    	}
	    }

	}
	.ranking{
		@include flex;
		text-align: center;
		justify-content: center;
  		align-items: flex-end;
  		padding:0 $emptyWidth;


		li{
			position: relative;
			flex:0 0 25%;
			color:#fff;

			.status_tip{
				position: absolute;
				bottom:53rem / $baseFontSize;
				left:0;
				font-size: 12rem / $baseFontSize;
				line-height:150%;
				background: rgba(lighten($priGreen,64%),.95);
				// background: rgba(255,255,255,.95);
				padding:8rem / $baseFontSize 10rem / $baseFontSize;
				border-radius: 5px;
				width: 150rem / $baseFontSize;
				color: #000;
				text-align: left;
				z-index:1;

				&:after{
					content:"";
					position: absolute;
					width:0;
					height: 0;
					border:10rem / $baseFontSize solid transparent;
					border-top:10rem / $baseFontSize solid rgba(lighten($priGreen,64%),.95);
					left:20%;
					bottom:-15rem / $baseFontSize;
				}

			}

			.ion{
				font-size: 25rem / $baseFontSize;
			}

			.small{
				font-size: 25rem / $baseFontSize;
				line-height:100%;
			}


			p{
				font-size: 12rem / $baseFontSize;
				margin-top: 5rem / $baseFontSize;
			}

			&:nth-child(2),&.mid{
				flex:0 0 50%;
				background: url(../img/safeBg.png) no-repeat center top;
				background-size:100%;
				padding-top:30rem / $baseFontSize;

				big{
					font-size: 75rem / $baseFontSize;
					line-height:100%;
					&+p{
						font-size: 14rem / $baseFontSize;
					}
				}
			}
			&.mid{
				position: relative;
				background: url(../img/team_bg.png) no-repeat center top;
				background-size:56%;

				&>span{
					position: absolute;
					top:1rem / $baseFontSize;
					right:0;
					left:0;
					font-size: 18rem / $baseFontSize;
					color:#e2e235;

				}
			}
		}
	}
	.ranking_info{
		@include flex;
		background: #00733A;
		text-align: center;
		padding:0 $emptyWidth $emptyWidth;

		ul{
			position: relative;
			@include flex;
			background: #fff;
			text-align: center;
			width:100%;
			padding: 20rem / $baseFontSize 6rem / $baseFontSize;
			border-radius: $borRadius;

			&:after{
				@include arrow;
				top:-15rem / $baseFontSize;
				left:50%;
				border:8rem / $baseFontSize solid transparent;
				border-bottom: 8rem / $baseFontSize solid #fff;
			}

			p{
				font-size: 14px;
				margin-top: 10rem / $baseFontSize;
			}
		}


		li{
			position: relative;
			@include flex1;
			i{
				font-style: normal;
			}
			.ion{
				font-size: 20rem / $baseFontSize;
				line-height: 28rem / $baseFontSize;

				&+ins{
					text-decoration: none;
					font-size: 12rem / $baseFontSize;
					color:$fcGray;
					padding-left: 2rem / $baseFontSize;
				}
			}
			.ion-android-star{
				color:red;
				font-size: 24rem / $baseFontSize;
			}
			.ion-ios-rose{
			    color:#FCC136;
			    font-size: 16rem / $baseFontSize;
			    line-height: 28rem / $baseFontSize;
			}

			&>span{
				font-size: 20rem / $baseFontSize;
				line-height:28rem / $baseFontSize;
			}
			.star_tip{
				position: absolute;
				bottom:65rem / $baseFontSize;
				left:0;
				font-size: 12rem / $baseFontSize;
				line-height:150%;
				background: rgba(lighten($priGreen,63%),.9);
				padding:5rem / $baseFontSize;
				border-radius: 5px;

				&:after{
					content:"";
					position: absolute;
					width:0;
					height: 0;
					border:10rem / $baseFontSize solid transparent;
					border-top:10rem / $baseFontSize solid rgba(lighten($priGreen,63%),.9);
					left:45%;
					bottom:-15rem / $baseFontSize;
				}

			}
		}
	}
	.two{
		background:#fff;
		margin-bottom: 10rem / $baseFontSize;
		box-shadow:0 0 3px #dfe4de;
		padding: 12.5rem / $baseFontSize 0;
	}
	.year_two{
		@include flex;
		//align-items: center;
		//justify-content: center;
		text-align: center;

		li{
			@include flex1;
			color:$mainColor;
			font-size: 13rem / $baseFontSize;

			&+li{
				border-left: 1px solid $borColor;
			}
		}
	}
	//周
	.week_two{
		height:55rem / $baseFontSize;
		line-height:55rem / $baseFontSize;

		i{
			margin: 0 15rem / $baseFontSize;
		}

		p{
			display:inline-block;
			border-left:1px solid $borColor;
			padding-left: 15rem / $baseFontSize;
		}

	}

	.week_con{
		position: relative;
		background:#fff;
		padding:$emptyWidth;

		h3{
			//position: absolute;
			color:#aaa;
			font-size: 14rem / $baseFontSize;
			text-align: right;
			font-weight: normal;

		}

		ul{
			padding:10rem / $baseFontSize 0;
			&>li{
				position: relative;

				.num{
					position: absolute;
					right:0;
					top:2rem / $baseFontSize;
					color:$priGreen;

				}


				&+li{
					margin-top: 15rem / $baseFontSize;
				}
			}
		}

		h6{
			font-size:14rem / $baseFontSize;
			font-weight: normal;
			color:$mainColor;
		}
		progress {
		    display: inline-block;
		    width: 100%;
		    height: 10rem / $baseFontSize;
		    //border: 1px solid $priGreen;
		    background-color:#e6e6e6;
		    color: $priGreen; /*IE10*/

			/*ie6-ie9*/
		    & ie {
			    display:block;
			    height: 100%;
			    background: $priGreen;
			}

			&::-moz-progress-bar { background: $priGreen; }
			&::-webkit-progress-bar { background: #e6e6e6; }
			&::-webkit-progress-value  { background: $priGreen; }

			&.warn{
				color: $yellowWarn; /*IE10*/

				&::-moz-progress-bar { background: $yellowWarn; }
				&::-webkit-progress-value  { background: $yellowWarn; }
			}

			&.danger{
				color: $redWarn; /*IE10*/

				&::-moz-progress-bar { background: $redWarn;}
				&::-webkit-progress-value  { background: $redWarn;}
			}
		}
		ol{
			background:#fafafa;
			padding:10rem / $baseFontSize 15rem / $baseFontSize;

			&>li{
				line-height:200%;
				// @include flex;
				// -webkit-flex-wrap:wrap;
				// flex-wrap:wrap;

				&>span{
					// width:50%;
					display:block;
				}

				&+li{
					padding-top: 10rem / $baseFontSize;
					margin-top: 10rem / $baseFontSize;
					border-top:1px dashed $borColor;
				}
			}
		}
	}

	//团队
	.team_two{
		padding:18rem / $baseFontSize $emptyWidth  12.5rem / $baseFontSize;
		position: relative;

		&>p{
			font-size: 14rem / $baseFontSize;
		}
	}

	.team_con{
		background:#fff;
		padding:$emptyWidth;
		//margin-top: 10rem / $baseFontSize;

		&>h3{
			font-size: 14rem / $baseFontSize;
			text-align: center;
		}
	}
	//散点图
	.scatter_nav{
		position: relative;
		background:#fff;
		// text-align: right;
		font-size: 0;
		border-bottom:1px solid darken($borColor,2%);
		// margin-bottom: -3px;
		padding:5rem / $baseFontSize $emptyWidth 0;

		.ion-help-circled{
				display: inline-block;
				position: absolute;
				    font-size: 20px;
				    color: $fc_a;
				    right: 15rem / $baseFontSize;
				    bottom: 2rem / $baseFontSize;
			}

		li{
			display:inline-block;
			padding:6rem / $baseFontSize 15rem / $baseFontSize;
			font-size: 14rem / $baseFontSize;
			border-bottom:#dfe4de;
			margin-bottom: -1px;
			color: #aaa;

			&.cur{
				color: $priGreen;
				border-bottom: 1px solid $priGreen;
			}

		}
	}

}
.pay_detail{
	.part{
		background:#fff;
		padding-bottom: 20rem / $baseFontSize;
		margin-bottom: 10rem / $baseFontSize;
		border-bottom:1px solid $borColor;
		& > span {
			padding:5rem / $baseFontSize $emptyWidth 0;
			font-size: 14rem / $baseFontSize;
			color: #aaa;
			display: inline-block;
		}

		& +.part{
			border-top:1px solid $borColor;
		}
	}
	h2{
		text-align: center;
		padding-top: 10rem / $baseFontSize;
		font-size: 18rem / $baseFontSize;
		line-height:180%;
		padding-bottom: 10rem / $baseFontSize;
	}
	.up,.down{
		text-align: center;
		font-size: 40rem / $baseFontSize;
		font-weight: 600;

		.ion{
			padding-right: 6rem / $baseFontSize;
			font-size: 30rem / $baseFontSize;
		}
	}
	.up{
		color:$priGreen;
	}
	.down{
		color:$fcRed;
	}
}
.rank_btn{
	position: absolute;
	right:20rem / $baseFontSize;
	top:80rem / $baseFontSize;
	color:#fff;
	width:60rem / $baseFontSize;
	height:36rem / $baseFontSize;
	line-height:14rem / $baseFontSize;
	text-align:center;
	// background:rgba(255,255,255,.2);
	border-radius:5rem / $baseFontSize;
	font-size:28rem / $baseFontSize;

	p{
		font-size: 12rem / $baseFontSize;

	}

}
//排行榜列表
.ranking_list{
	.nav{
		@include flex;

		li{
			@include flex1;

			&.cur{
				background:#aaa;
			}
		}
	}

}
.nav_li{
	@include flex;

	li{
		@include flex1;
		padding:10rem / $baseFontSize 0;
		text-align: center;
		background:#efefef;


		&.cur{
			background:lighten($priGreen,72%);
			border-bottom: 1px solid $priGreen;
			color:$priGreen;
			font-weight: bold;
		}
	}
}
//等级说明
.level_explain{
	background:#fff;
	padding:25rem / $baseFontSize $emptyWidth;
	@include shadow(0 0 3px $borColor);

	.table{
		width:100%;
		margin-top: 15rem / $baseFontSize;

		td{
			border:1px solid $borColor;
			padding:8rem / $baseFontSize 5rem / $baseFontSize;
			min-width:34rem / $baseFontSize;
			font-size:12rem / $baseFontSize;
		}
	}

	h3{
		line-height:150%;
		font-size: 16rem / $baseFontSize;
	}
	ol{
		padding:15rem / $baseFontSize 0  0 30rem / $baseFontSize;
	}
	ol,li{
		list-style:lower-latin outside;
	}
	li{
		line-height:200%;
		padding-left: 10rem / $baseFontSize;
	}
}
//tab
.tab_nav{
	position: relative;
	background:#fff;
	font-size: 0;
	border-bottom:1px solid darken($borColor,2%);
	padding:5rem / $baseFontSize $emptyWidth 0;

	li{
		display:inline-block;
		padding:6rem / $baseFontSize 15rem / $baseFontSize;
		font-size: 14rem / $baseFontSize;
		border-bottom:#dfe4de;
		margin-bottom: -1px;
		color: #aaa;

		&.cur{
			color: $priGreen;
			border-bottom: 1px solid $priGreen;
		}

	}
}
.optionname{
	position: absolute;
	bottom: 15rem / $baseFontSize;
    left: 50%;
    transform:translate(-50%,0);
}
//行程次数提示
.ion-help-circled{
	position: absolute;
	font-size:20rem / $baseFontSize!important;
}
.daytimes_tip{
	$tipW:100rem / $baseFontSize;

	position: absolute;
	bottom:10rem / $baseFontSize;
	left:-$tipW / 2 - 2rem / $baseFontSize;
	width:$tipW;
	font-size: 12rem / $baseFontSize;
	line-height:150%;
	background: rgba(lighten($priGreen,63%),.9);
	padding:5rem / $baseFontSize;
	border-radius: 5px;
	color:#333;

	&:after{
		content:"";
		position: absolute;
		width:0;
		height: 0;
		border:10rem / $baseFontSize solid transparent;
		border-top:10rem / $baseFontSize solid rgba(lighten($priGreen,63%),.9);
		left:45%;
		bottom:-15rem / $baseFontSize;
	}
}

